<template>
  <div class="home">
    <!-- 导航栏 -->
    <NavBar
      title="苒兴教育"
      :left-arrow="false"
      :border="false"
      class="home__navbar"
    >
      <template #right>
        <van-icon name="search" @click="onSearch" />
      </template>
    </NavBar>

    <!-- 轮播图 -->
    <div class="home__banner">
      <van-swipe
        :autoplay="3000"
        indicator-color="white"
        class="home__swipe"
      >
        <van-swipe-item v-for="(banner, index) in banners" :key="index">
          <img :src="banner.image" :alt="banner.title" class="home__banner-img" @click="onBannerClick(banner)" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 功能菜单 -->
    <div class="home__menu">
      <div class="home__menu-grid">
        <div
          v-for="(menu, index) in menus"
          :key="index"
          class="home__menu-item"
          @click="onMenuClick(menu)"
        >
          <div class="home__menu-icon">
            <van-icon :name="menu.icon" :color="menu.color" size="24" />
          </div>
          <div class="home__menu-text">{{ menu.title }}</div>
        </div>
      </div>
    </div>

    <!-- 推荐课程 -->
    <div class="home__section">
      <div class="home__section-header">
        <h3 class="home__section-title">推荐课程</h3>
        <span class="home__section-more" @click="onMoreCourses">更多</span>
      </div>
      <div class="home__courses">
        <div
          v-for="course in recommendCourses"
          :key="course.id"
          class="home__course-item"
          @click="onCourseClick(course)"
        >
          <img :src="course.cover" :alt="course.title" class="home__course-cover" />
          <div class="home__course-info">
            <h4 class="home__course-title">{{ course.title }}</h4>
            <p class="home__course-desc">{{ course.description }}</p>
            <div class="home__course-meta">
              <span class="home__course-price">¥{{ course.price }}</span>
              <span class="home__course-students">{{ course.studentCount }}人学习</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 热门考试 -->
    <div class="home__section">
      <div class="home__section-header">
        <h3 class="home__section-title">热门考试</h3>
        <span class="home__section-more" @click="onMoreExams">更多</span>
      </div>
      <div class="home__exams">
        <div
          v-for="exam in hotExams"
          :key="exam.id"
          class="home__exam-item"
          @click="onExamClick(exam)"
        >
          <div class="home__exam-icon">
            <van-icon name="edit" color="#ff6b35" size="20" />
          </div>
          <div class="home__exam-info">
            <h4 class="home__exam-title">{{ exam.title }}</h4>
            <p class="home__exam-desc">{{ exam.description }}</p>
          </div>
          <div class="home__exam-arrow">
            <van-icon name="arrow" color="#c8c9cc" size="16" />
          </div>
        </div>
      </div>
    </div>

    <!-- 学习统计 -->
    <div class="home__stats" v-if="userStore.isLoggedIn">
      <div class="home__stats-header">
        <h3 class="home__stats-title">我的学习</h3>
      </div>
      <div class="home__stats-grid">
        <div class="home__stats-item">
          <div class="home__stats-number">{{ userStore.user.studyStats?.totalCourses || 0 }}</div>
          <div class="home__stats-label">已学课程</div>
        </div>
        <div class="home__stats-item">
          <div class="home__stats-number">{{ userStore.user.studyStats?.totalHours || 0 }}</div>
          <div class="home__stats-label">学习时长</div>
        </div>
        <div class="home__stats-item">
          <div class="home__stats-number">{{ userStore.user.studyStats?.totalExams || 0 }}</div>
          <div class="home__stats-label">考试次数</div>
        </div>
        <div class="home__stats-item">
          <div class="home__stats-number">{{ userStore.user.studyStats?.avgScore || 0 }}%</div>
          <div class="home__stats-label">平均分数</div>
        </div>
      </div>
    </div>

    <!-- 底部间距 -->
    <div class="home__bottom-space"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import NavBar from '@/components/common/NavBar.vue'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 轮播图数据
const banners = ref([
  {
    id: 1,
    title: '新课程上线',
    image: 'https://via.placeholder.com/375x150/4285f4/ffffff?text=新课程上线',
    link: '/courses'
  },
  {
    id: 2,
    title: '考试报名',
    image: 'https://via.placeholder.com/375x150/34a853/ffffff?text=考试报名',
    link: '/exams'
  },
  {
    id: 3,
    title: '学习优惠',
    image: 'https://via.placeholder.com/375x150/ea4335/ffffff?text=学习优惠',
    link: '/promotions'
  }
])

// 功能菜单数据
const menus = ref([
  {
    id: 1,
    title: '课程学习',
    icon: 'play-circle-o',
    color: '#4285f4',
    route: '/courses'
  },
  {
    id: 2,
    title: '在线考试',
    icon: 'edit',
    color: '#34a853',
    route: '/exams'
  },
  {
    id: 3,
    title: '学习记录',
    icon: 'clock-o',
    color: '#fbbc04',
    route: '/study-records'
  },
  {
    id: 4,
    title: '错题本',
    icon: 'bookmark-o',
    color: '#ea4335',
    route: '/wrong-questions'
  },
  {
    id: 5,
    title: '证书查询',
    icon: 'certificate',
    color: '#9c27b0',
    route: '/certificates'
  },
  {
    id: 6,
    title: '学习计划',
    icon: 'calendar-o',
    color: '#ff9800',
    route: '/study-plan'
  },
  {
    id: 7,
    title: '资料下载',
    icon: 'down',
    color: '#607d8b',
    route: '/downloads'
  },
  {
    id: 8,
    title: '更多功能',
    icon: 'ellipsis',
    color: '#795548',
    route: '/more'
  }
])

// 推荐课程数据
const recommendCourses = ref([
  {
    id: 1,
    title: 'JavaScript基础入门',
    description: '从零开始学习JavaScript编程语言',
    cover: 'https://via.placeholder.com/120x80/4285f4/ffffff?text=JS',
    price: 199,
    studentCount: 1234
  },
  {
    id: 2,
    title: 'Vue.js实战开发',
    description: '掌握Vue.js框架开发现代Web应用',
    cover: 'https://via.placeholder.com/120x80/34a853/ffffff?text=Vue',
    price: 299,
    studentCount: 856
  },
  {
    id: 3,
    title: 'React Native移动开发',
    description: '使用React Native开发跨平台移动应用',
    cover: 'https://via.placeholder.com/120x80/ea4335/ffffff?text=RN',
    price: 399,
    studentCount: 567
  }
])

// 热门考试数据
const hotExams = ref([
  {
    id: 1,
    title: '前端开发工程师认证',
    description: '测试前端开发技能水平'
  },
  {
    id: 2,
    title: 'JavaScript高级程序设计',
    description: '深入理解JavaScript核心概念'
  },
  {
    id: 3,
    title: 'Vue.js框架应用',
    description: '考察Vue.js实际应用能力'
  }
])

// 搜索
const onSearch = () => {
  router.push('/search')
}

// 轮播图点击
const onBannerClick = (banner) => {
  if (banner.link) {
    router.push(banner.link)
  }
}

// 菜单点击
const onMenuClick = (menu) => {
  if (menu.route) {
    router.push(menu.route)
  }
}

// 课程点击
const onCourseClick = (course) => {
  router.push(`/courses/${course.id}`)
}

// 考试点击
const onExamClick = (exam) => {
  router.push(`/exams/${exam.id}`)
}

// 更多课程
const onMoreCourses = () => {
  router.push('/courses')
}

// 更多考试
const onMoreExams = () => {
  router.push('/exams')
}

// 页面初始化
onMounted(() => {
  // 可以在这里加载数据
  console.log('Home page mounted')
})
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';

.home {
  min-height: 100vh;
  background: $background-color;

  &__navbar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    
    :deep(.navbar__title-text) {
      color: white;
    }
    
    :deep(.van-icon) {
      color: white;
    }
  }

  &__banner {
    margin-bottom: $spacing-base;
  }

  &__swipe {
    height: 150px;
  }

  &__banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
  }

  &__menu {
    background: white;
    margin-bottom: $spacing-base;
    padding: $spacing-base;
  }

  &__menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: $spacing-base;
  }

  &__menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: $spacing-base;
    cursor: pointer;
    border-radius: $border-radius-base;
    transition: all $transition-duration-fast;

    &:active {
      background: $gray-100;
      transform: scale(0.95);
    }
  }

  &__menu-icon {
    margin-bottom: $spacing-xs;
  }

  &__menu-text {
    font-size: $font-size-sm;
    color: $text-color;
    text-align: center;
  }

  &__section {
    background: white;
    margin-bottom: $spacing-base;
    padding: $spacing-base;
  }

  &__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: $spacing-base;
  }

  &__section-title {
    font-size: $font-size-lg;
    font-weight: $font-weight-medium;
    color: $text-color;
    margin: 0;
  }

  &__section-more {
    font-size: $font-size-sm;
    color: $primary-color;
    cursor: pointer;
  }

  &__courses {
    display: flex;
    flex-direction: column;
    gap: $spacing-base;
  }

  &__course-item {
    display: flex;
    padding: $spacing-base;
    border-radius: $border-radius-base;
    border: 1px solid $border-color;
    cursor: pointer;
    transition: all $transition-duration-fast;

    &:active {
      background: $gray-50;
      transform: scale(0.98);
    }
  }

  &__course-cover {
    width: 120px;
    height: 80px;
    border-radius: $border-radius-base;
    object-fit: cover;
    margin-right: $spacing-base;
  }

  &__course-info {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  &__course-title {
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    color: $text-color;
    margin: 0 0 $spacing-xs 0;
    @include ellipsis(1);
  }

  &__course-desc {
    font-size: $font-size-sm;
    color: $text-color-light;
    margin: 0 0 $spacing-xs 0;
    @include ellipsis(2);
  }

  &__course-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
  }

  &__course-price {
    font-size: $font-size-lg;
    font-weight: $font-weight-medium;
    color: $danger-color;
  }

  &__course-students {
    font-size: $font-size-sm;
    color: $text-color-light;
  }

  &__exams {
    display: flex;
    flex-direction: column;
    gap: $spacing-sm;
  }

  &__exam-item {
    display: flex;
    align-items: center;
    padding: $spacing-base;
    border-radius: $border-radius-base;
    border: 1px solid $border-color;
    cursor: pointer;
    transition: all $transition-duration-fast;

    &:active {
      background: $gray-50;
    }
  }

  &__exam-icon {
    margin-right: $spacing-base;
  }

  &__exam-info {
    flex: 1;
  }

  &__exam-title {
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    color: $text-color;
    margin: 0 0 $spacing-xs 0;
  }

  &__exam-desc {
    font-size: $font-size-sm;
    color: $text-color-light;
    margin: 0;
  }

  &__exam-arrow {
    margin-left: $spacing-base;
  }

  &__stats {
    background: white;
    margin-bottom: $spacing-base;
    padding: $spacing-base;
  }

  &__stats-header {
    margin-bottom: $spacing-base;
  }

  &__stats-title {
    font-size: $font-size-lg;
    font-weight: $font-weight-medium;
    color: $text-color;
    margin: 0;
  }

  &__stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: $spacing-base;
  }

  &__stats-item {
    text-align: center;
  }

  &__stats-number {
    font-size: $font-size-xl;
    font-weight: $font-weight-bold;
    color: $primary-color;
    margin-bottom: $spacing-xs;
  }

  &__stats-label {
    font-size: $font-size-sm;
    color: $text-color-light;
  }

  &__bottom-space {
    height: calc($tabbar-height + env(safe-area-inset-bottom));
  }
}

// 响应式适配
@include respond-below(480px) {
  .home {
    &__menu-grid {
      grid-template-columns: repeat(3, 1fr);
    }
    
    &__stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
</style>